<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>files</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow-x: hidden;
            overflow-x: hidden;
        }
        .contain {
            width: 350px;
            overflow-y: hidden;
            overflow-x: hidden;
        }
        .con-file {
            width: 100%;
            display: flex;
            flex-direction: row;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            padding: 20px 30px 25px 30px;
            position: relative;
        }
        .con-file img {
            width: 17px;
            height: 17px;
            position: absolute;
            top: 15px;
            left: 30px;
        }
        .con-file p {
            font-family: HeiTi;
            font-weight: 400;
            font-size: 18px;
            position: absolute;
            top: 10px;
            left: 53px;
        }
        .search {
            position: absolute;
            top: 8px;
            right: 80px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #ddd;
        }
        #input {
            position: absolute;
            right: 0;
            width: 0px;
            background-color: #ddd;
            list-style-type: none;
            outline: none;
            border: none;
            border-radius: 15px;
            padding: 5px 15px;
            height: 20px;
        }
        .iconfont {
            position: absolute;
            right: 0px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #404040;
        }
        .iconfont img {
            width: 18px;
            height: 18px;
            margin: 6px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .con-list {
            width: 100%;
            border-bottom: 1px solid #ddd;
            display: flex;
            flex-direction: row;
            padding: 20px 30px 55px 30px;
            position: relative;
        }
        .con-list-left {
            width: 20px;
            position: absolute;
            top: 30px;
            left: 30px;
        }
        .con-list-mid {
            width: 23px;
            position: absolute;
            top: 30px;
            right: 150px;
        }
        .con-list-right {
            width: 20px;
            position: absolute;
            top: 30px;
            right: 100px;
        }
        .con-list p {
            font-family: KaiTi;
            color: #404040;
            font-size: 20px;
            position: absolute;
            top: 15px;
            left: 65px;
            width: 270px; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis;
        }
        #clear {
            display: none;
        }
        .clear-p {
            position: absolute;
            top: 70px;
            left: 15px;
            font-family: KaiTi;
            font-weight: 600;
            color: #fc957f;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="con-file" id="open-file">
        <div id="open">
            <img src="../../image/add.png" alt="新建文件">
            <p>新建文章</p>
        </div>     
        <div class="search" id="search">
            <input id="input" placeholder="search..." type="text">
            <div class="iconfont" id="iconfont">
                <img src="../../image/search.png" alt="搜索">
            </div>
        </div>
    </div>
    <div id="clear">
        <img src="../../image/xiaomai.jpg" alt="小埋呦">
        <p class="clear-p">没有相关文章欧！</p> 
    </div>
    <div class="contain" id="content"></div>
    <script>
        require('./files.js')     
    </script>
</body>
</html>